<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--[if lt IE 9]>
    <script src="../js/jquery-1.11.3.js"></script>
    
<![endif]-->
		<!--[if gte IE 9]><!-->
		<script src="../js/jquery-3.1.1.js"></script>
		<!--<![endif]-->
		<script type="text/javascript">
			$(document).ready(function() {
				//自 jQuery 版本 1.7 起，on() 方法是向被选元素添加事件处理程序的首选方法。
				$("#p1").bind("click", function() {
					myalert(this);
				});
				$("#p2").on("click", function() {
					myalert(this);
				});
				$("#p3").click(function() {
					myalert(this);
				});
				$("#p4").dblclick(function() {
					myalert(this);
				});

				$("#btn1").click(function() {
					$("#di4").append($("#d4p1").detach());
				});
				$("#btn2").click(function() {
					$("#di4").append($("#d4p2").remove());
				});
				$("#di4 p").click(function() {
					$(this).animate({
						fontSize: "+=1px"
					})
				});
				$("#div1").delegate("#p5", "click", function() {
					$(this).slideToggle();
				});

				$("#bt5").click(function() {
					$("#div1").undelegate();
				});

				$("#p6").click(function(event) {
					alert(event.currentTarget === this);
					$(event.currentTarget).css("background-color", "pink");
				});

				$("#p7").click(function() {
					myalert(this);
				});
				//  $("#p7").off("click");
				$("#p7").unbind();

				$("#p8").one("click", function() {
					$(this).animate({
						fontSize: "+=6px"
					});
				});
				$("#p9").on("click", function() {
					$(this).animate({
						fontSize: "+=6px"
					});
				});

				var objPerson = {
					name: "John Doe",
					age: 32,
					test: function() {
						$("#p10").after("Name: " + this.name + "<br> Age: " + this.age);
					}
				};
				$("#b1").one("click", $.proxy(objPerson, "test"));

				$("#button3").click(function() {
					$(this).after("select");
				});

				$("#button2").click(function() {
					$("#button3").triggerHandler("click");
				});
				$("#button4").click(function() {
					$("#button3").trigger("click");
				});
			});

			function myalert(t) {
				alert(t.id + "段落被点击了。");
			}
		</script>
		<style type="text/css">
			div {
				border: 1px solid black;
				margin-top: 8px;
			}
		</style>
	</head>

	<body>

		<div id="di1">
			<h1>添加事件</h1> 失去焦点: <input id="input1" type="text">（在输入框写些东西，然后点击输入框外，让其失去焦点。）
			<br> 改动试试: <input id="input2" type="text"> （然后按下 enter 键或点击输入框外部。）
			<br>

			<span id="p1">点我！</span>
			<span id="p2">点我！</span>
			<span id="p3">点我！</span>
			<span id="p4">点我！</span>
			<span id="p6">点我！</span>
		</div>
		<div id="di3">
			<div id="div1" style="background-color:yellow">
				<h1>解除事件</h1>
				<p id="p5">这个段落在 div 元素内。</p>
			</div>
			<button id="bt5"> bt5解除委托</button>
		</div>
		<div id="di4">
			<br>
			<h1>移除事件</h1>
			<span id="p7">点我！</span>
			<p id="d4p1">移除后点击这一段——它保留单击事件。</p>
			<p id="d4p2">移除后点击这一段——它不保留单击事件。</p>
			<button id="btn1">Detach方法移除并插入P元素</button>
			<button id="btn2">Remove方法移除并插入P元素</button>
		</div><br>
		<div id="di5">
			<h1>一次性事件</h1>
			<span id="p8">点我！</span>
			<span id="p9">点我！</span>

		</div> <br>
		<div id="di6">

			<h1>代理事件</h1>
			<button id="b1">点我！</button>
			<p id="p10"> </p>
		</div> <br>
		<div id=div5 style="border: 1px solid black;padding:10px;">
			<h2>触发事件</h1>	<br>
			<button id="button2"> bt2触发button3 事件</button>
			<button id="button3"> bt3触发追加 事件</button>
			<button id="button4"> bt4触发button3 事件</button>
		</div>

	</body>

</html>